import React, { useState } from 'react'

import { Form, Input, InputNumber, Select, Button } from 'antd'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

const { Option } = Select
export default (props: any) => {
    const { close } = props
    const [val, setVal] = useState(BraftEditor.createEditorState(null))
    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 19 }}
        >
            <Form.Item label="帮助标题" required>
                <Input style={{ width: "40%" }} />
            </Form.Item>
            <Form.Item label="帮助类型" required>
                <Select style={{ width: "220px" }}>
                    <Option value="1">
                        分类一
                    </Option>
                </Select>
            </Form.Item>
            <Form.Item label="排序">
                <InputNumber />
            </Form.Item>
            <Form.Item label="链接地址" help="当填写链接后点击标题将直接跳转至链接地址，不显示内容。链接格式请以http://开头">
                <Input />
            </Form.Item>
            <Form.Item label="帮助内容" required style={{ marginTop: "20px" }}>
                <BraftEditor
                    style={{ border: '1px solid #d1d1d1' }}
                    value={val}
                    onChange={() => {

                    }}
                    onSave={() => {

                    }}
                />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 3 }}>
                <Button type="primary" style={{ marginRight: "6px" }}>保存</Button>
                <Button onClick={() => close()}>取消</Button>
            </Form.Item>
        </Form>
    )
}